<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>QUERY USER PAGE</title>
		<script type="text/javascript" src="../js/vue_2.2.2.min.js"></script>
		<script src="../js/jQuery1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<!--按钮通用设置 -->
		<style>
			button {
				border-style: outset;
			}
			button:hover {
				background-color: #c7c7c7;
			}
			button:active {
				background-color: #8c8c8c;
			}
		</style>
		<!--下拉框通用设置 -->
		<style type="text/css">
			select {
				/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
				border: solid 2px #ffaa00;
				/*很关键：将默认的select选择框样式清除*/
				appearance: none;
				-moz-appearance: none;
				-webkit-appearance: none;
				/*在选择框的最右侧中间显示小箭头图片*/
				background: url("../images/arrow.png") no-repeat scroll right center transparent;
				/*为下拉小箭头留出一点位置，避免被文字覆盖*/
				padding-right: 14px;
				width: 160px;
				height: 30px;
			}

			/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
			select::-ms-expand {
				display: none;
			}

			table {
				border: 1px solid black;
			}
		</style>
		<!--表格通用设置 -->
		<style type="text/css">
			/* td {
				width: 90px;
				text-align: center;
			}
			th {
				width: 90px;
				text-align: center;
			} */
			<style type="text/css">
			html {
			    font-family: sans-serif;
			    -ms-text-size-adjust: 100%;
			    -webkit-text-size-adjust: 100%;
			}
			 
			body {
			    margin: 10px;
			}
			table {
			    border-collapse: collapse;
			    border-spacing: 0;
			}
			 
			td,th {
			    padding: 0;
				text-align: center;
			}
			 
			.pure-table {
			    border-collapse: collapse;
			    border-spacing: 0;
			    empty-cells: show;
			    border: 1px solid #cbcbcb;
			}
			 
			.pure-table caption {
			    color: #000;
			    font: italic 85%/1 arial,sans-serif;
			    padding: 1em 0;
			    text-align: center;
			}
			 
			.pure-table td,.pure-table th {
			    border-left: 1px solid #cbcbcb;
			    border-width: 0 0 0 1px;
			    font-size: inherit;
			    margin: 0;
			    overflow: visible;
			    padding: .5em 1em;
			}
			 
			.pure-table thead {
			    background-color: #e0e0e0;
			    color: #000;
			    text-align: left;
			    vertical-align: bottom;
			}
			 
			.pure-table td {
			    background-color: transparent;
			}
			</style>
		</style>

		<!-- 圆角绿色小按钮！ -->
		<style type="text/css">
			.my_green_button {
				height: 30px;
				background-color: #95f04b;
				border: 0;
				border-radius: 20px;
				-moz-border-radius: 20px;
				/* 老的 Firefox */
				font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
				font-weight: bold;
				color: #5c8f30;
				border: 1px solid #6eac3a;
			}
			.my_green_button:hover{
				background-color: #92e747;
			}
		</style>

	</head>
	<body>
		<h1 >用户信息管理</h1>
		<span >User Management</span><br>
		<hr >
		<!--主要页面 -->
		<div id="table_div">
			查询类型：
			<select id="selectBox">
				<option value="1">系统管理员</option>
				<option value="2">实验室负责人</option>
				<option value="0">标准用户</option>
				<option value="-1">被禁用的用户</option>
			</select>；
			每页
			<select id="perpage">
				<option value="1">1【测试】</option>
				<option value="2">2【测试】</option>
				<option value="3">3</option>
				<option value="5" selected>5</option>
				<option value="10">10</option>
				<option value="50">50</option>
			</select>项。
			<button id="goQuery" type="button" style="height: 30px;">✍ 确定</button> &nbsp;
			（其他功能：<button class="my_green_button" id="add_newciuser">&nbsp;(+)&nbsp;新增用户&nbsp;</button>）
			<br>
			<marquee width="50%">
				<b id="ok" style="color: red;">* 请点击“确定”按钮以查询 *</b><br>
			</marquee>
			
			
			<br>
			
			<div style="text-align: center;">
			
				<div id="" style="width: 80%; margin: 0 auto;">
					<div style="text-align: left;">
						<!-- 1-admin;0-student;V1.5新增:2-部分实验室授权管理员(负责人) -->
						
						✍共查询到&nbsp;<span id="allnum">-1</span>&nbsp;项。
						第<input id="nowpage" type="number" style="width: 40px;" value="1">页(<button type="button" id="jumpto">跳转</button>)，
						共&nbsp;<span id="allpage">-1</span>&nbsp;页。
						<button id="bt_pre">上一页</button>
						<button id="bt_next">下一页</button>
						<br />
						（此表数据最后一次刷新于：
						<span id="reload_date2">
							-
						</span>
						）
					</div>
					<table id="user_list" width="100%" class="pure-table">
						<thead>
							<tr>
								<th>学号(sid)</th>
								<th>姓名</th>
								
								<th>email</th>
								<th>用户类型</th>
								<th>状态</th>
								<th>注册时间</th>
								<th>修改时间</th>
								<th>通过人</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(user,index) in user_list">
								<td v-bind:id="'ID_'+user.id">{{user.sid}}</td>
								<td>{{user.name}}</td>
								
								<td>{{user.email}}</td>
								<td>{{now_type}}</td>
								<td>{{now_state}}</td>
								<td>{{(user.regtime+"").split('.')[0]}}</td>
								<td>{{(user.modifytime+"").split('.')[0]}}</td>
								<td>{{user.pass_by}}</td>
								<td v-html="'<button onclick=\'toPageById('+user.id+')\'>操作</button>'"></td>
							</tr>
						</tbody>
						
					</table>
				</div>
			</div>
		</div>
		
		<!--编辑用户的页面 -->
		<div id="opinions_div" style="display: none;">
			<button id="back" type="button" style="width: 100%;">< 返回</button>
			<iframe id="user_iframe" src="" width="100%" height="1920px" style="border: 0;"></iframe>
		</div>
		
		<div style="text-align: center;">
			<p>User Management Model version 2.0 (C) 2022 CXSYS <br><span style="background-color: limegreen;color: #008000;">&nbsp;VUE&nbsp;</span> inside</p>
		</div>
		
	</body>
	<script type="text/javascript">
		Vue.config.devtools = true;
		user_list = [{"activation_code":"-","activation_code_end":"-","email":"-","id":-1,"is_available":0,"jsonmessage":"-","memo":"-","modifytime":"-","name":"-","number_of_times":0,"pass_by":"-","password":"-","photoPath":"-","regtime":"-","sid":"-","type":-1}];
		var now_type = "-";
		var now_state = "-";
		
		//用于跳转回表格页面时定位
		var now_id = "ID_-1";
		
		var my_vue = new Vue({
			el:"#user_list",
			data:{
				"user_list":user_list,
				"now_type":now_type,
				"now_state":now_state
			}
		});
		
		function calcAllPage(allnum, perpage) {
			return Math.ceil(allnum / perpage);
		}
		
		function load_users(){
			console.log(jQuery("#nowpage").val());
			$.ajax({
				url: '../CiuserServlet',
				
				data: {
					'mode': 45,
					'type':$("#selectBox").val(),
					'page':$("#nowpage").val(),
					'perpage':$("#perpage").val()
				},
			
				success: function(message) {
					console.log(message);
					// alert(message);
					if(true) {
						message = JSON.parse(message);
						
						my_vue.$data.user_list=message;
						$("#reload_date2").text(new Date().toLocaleString());
					}
				},
				error: function(message) {
					console.log(message)
				}
			})
		}
		
		function reflash_allpage(){
			$.ajax({
				url: '../CiuserServlet',
				data: {
					'mode': 46,
					'type':$("#selectBox").val(),
					
				},
				success:function(message){
					message = eval(message);
					$("#allnum").text(message);
					jQuery("#allpage").text(calcAllPage(message, jQuery("#perpage").val()))
					jQuery("#id_user_num2").text("共查询到 "+message+" 条记录")
				},
				error:function(){
					$("#allnum").text("0");
				}
			});
		}
		
		
		
		$(function(){
			$("#goQuery").click(function(){
				$("#ok").hide();
				$("#table_div").show();
				var type = $("#selectBox").val();
				switch(type)
				{
					case '1': {now_type="系统管理员";now_state = "正常";break;}
					case '2': {now_type="实验室负责人"; now_state="正常";break;}
					case '0': {now_type="标准用户";now_state = "正常";break;}
					case '-1': {now_type="-";now_state = "禁用";break;}
				}
				my_vue.$data.now_type=now_type;
				my_vue.$data.now_state=now_state;
				
				reflash_allpage();
				$("#nowpage").val(1);
				load_users();
				
			});
			
			
			//跳转
			$("#jumpto").click(function(){
				load_users();
			});
			
			$("#selectBox").change(function(){
				$("#ok").show();
			});
			
			$("#back").click(function(){
				$("#opinions_div").hide();
				$("#table_div").show();
				window.location.hash = "#"+now_id;
				
			});
			
			//上一页
			$("#bt_pre").click(function() {
				if (eval($("#nowpage").val()) <= 1) {
					$("#nowpage").val(1);
					alert("已经是第一页！");
				} else {
					$("#nowpage").val($("#nowpage").val() - 1);
					$("#jumpto").click();//跳转
				}
			});
			
			
			
			//下一页
			$("#bt_next").click(function() {
				console.log($("#nowpage").val());
				console.log($("#allpage").text())
				if (eval($("#nowpage").val()) >= eval($("#allpage").text())) {
					$("#nowpage").val($("#allpage").text());
					alert("已经是最后页！");
				} else {
					$("#nowpage").val(eval($("#nowpage").val()) + 1);
					$("#jumpto").click();//跳转
				}
			
			});
			
			$("#perpage").change(function(){
				$("#selectBox").change();
			});
			
			$("#add_newciuser").click(function(){
				toRegisterPage();
			})
			
			
		});
		
		///展示切换环节/ 
		//用于展示用户详细信息
		function toPageById(id) {
			if(id == -1){
				alert("* 没有数据，请点击“确定”按钮以查询 *");
				return;
			}
			now_id = "ID_"+id;
			$("#table_div").hide();
			$("#opinions_div").show();
			$('#user_iframe').attr('src', 'jumpToServlet?mode=ciuser&id=' + id);
			
		}
		
		//用于登录页面切换
		function toRegisterPage() {
			$("#table_div").hide();
			$("#opinions_div").show();
			$('#user_iframe').attr('src', 'ciregister.html');
			
		}
		
		
	</script>
</html>
